<template>
	<div style="margin-top: 1rem;">
		<div><span style="color: #A9A9A9">首页</span> > 商品</div>
		<div style="margin-top: 1rem;font-weight: bold;font-size: 20px;">GREEN PRODUCTS</div>
		<div :class="isShow==1 ? 'show' : 'hidden'">
			<van-row type="flex" justify="center"
				style="text-align: center;justify-content: space-between;margin-bottom: 1rem;">
				<van-col span="7" class="goods_item" v-for="(item,i) in product" :key="i"
					style='border: 0.05rem solid #ccc; margin-top: 1rem;' @click="onDetail(item.id)">
					<van-image radius="10px 10px 0 0" :src="APIDomainName + item.pic"></van-image>
					<div class="van-ellipsis" style="margin-top: 0.5rem;font-size: 16px;font-weight:600;">{{item.title}}
					</div>
					<van-rate v-model="value" readonly :size="15" color="#ffd21e" void-icon="star" void-color="#eee"
						style="text-align: center;margin: 0.5rem auto 0;" />
					<div class="price">￥{{item.price}}</div>
				</van-col>
			</van-row>
		</div>
		<div :class="isShow==2 ? 'show' : 'hidden'">
			<van-row type="flex" justify="center"
				style="text-align: center;justify-content: space-between;margin-bottom: 1rem;">
				<van-col span="7" class="goods_item" v-for="(item,i) in producttwo" :key="i"
					style='border: 0.05rem solid #ccc; margin-top: 1rem;' @click="onDetail(item.id)">
					<van-image radius="10px 10px 0 0" :src="APIDomainName + item.pic"></van-image>
					<div class="van-ellipsis" style="margin-top: 0.5rem;font-size: 16px;font-weight:600;">{{item.title}}
					</div>
					<van-rate v-model="value" readonly :size="15" color="#ffd21e" void-icon="star" void-color="#eee"
						style="text-align: center;margin: 0.5rem auto 0;" />
					<div class="price">￥{{item.price}}</div>
				</van-col>
			</van-row>
		</div>
		<div :class="isShow==3 ? 'show' : 'hidden'">
			<van-row type="flex" justify="center"
				style="text-align: center;justify-content: space-between;margin-bottom: 1rem;">
				<van-col span="7" class="goods_item" v-for="(item,i) in productthree" :key="i"
					style='border: 0.05rem solid #ccc; margin-top: 1rem;' @click="onDetail(item.id)">
					<van-image radius="10px 10px 0 0" :src="APIDomainName + item.pic"></van-image>
					<div class="van-ellipsis" style="margin-top: 0.5rem;font-size: 16px;font-weight:600;">{{item.title}}
					</div>
					<van-rate v-model="value" readonly :size="15" color="#ffd21e" void-icon="star" void-color="#eee"
						style="text-align: center;margin: 0.5rem auto 0;" />
					<div class="price">￥{{item.price}}</div>
				</van-col>
			</van-row>
		</div>
		<van-pagination v-model="currentPage"  :total-items="24" @change="onClickPagination" />
		
		<div style="margin-top: 1rem;font-weight: bold;font-size: 20px;">PRODUCTS</div>
		<van-tabs v-model="activeKey" color="#65a15a" @click="onClickLeftMenus(activeKey+1)">
			<van-tab :title="item.name" v-for="(item, i) in categoryList" :key="i">
				<van-row type="flex" justify="center"
					style="text-align: center;justify-content: space-between;margin-bottom: 1rem;">
					<van-col span="7" class="goods_item" v-for="(item,i) in productList" :key="i"
						@click="onDetail(item.id)"
						style='border: 0.05rem solid  #ccc; margin-top: 1rem; text-align: center;border-radius: 10px;'>
						<van-image radius="10px 10px 0 0" :src="APIDomainName + item.pic"></van-image>
						<div style="background-color: #e8e7e3;border-radius: 0 0 10px 10px;">
							<div class="van-ellipsis" style="margin-top: 0.5rem;font-size: 16px;font-weight:600;">
								{{item.title}}
							</div>
							<div style="margin-top: 0.5rem;font-size: 16px;color: #6c757d;">
								{{item.flowerlanguage}}
							</div>
							<div class="price" style="color: #65a15a;font-weight: bold;">￥{{item.price}}</div>
						</div>

					</van-col>
				</van-row>
			</van-tab>
		</van-tabs>
	</div>


</template>



<script>
	//1.导入封装后的接口  
	import {
		getProductListAPI,
		getProductAPI,
		getProductTwoAPI,
		getProductThreeAPI,
	} from "@/api/product.js";
	import {
		getCategoryAPI
	} from "@/api/category.js";

	export default {
		data() {
			return {
				value: 3,
				currentPage: 1,
				productList: [], //商品列表
				category_id: null,
				activeKey: 0,
				categoryList: [], //分类列表
				product: [],
				producttwo: [],
				productthree: [],
				isShow: 1,
			};
		},
		//生命周期的钩子函数，当实例别创建好了后被调用
		created() {
			getCategoryAPI().then((result) => {
				// console.log(result);
				this.categoryList = result.data;
				this.category_id = this.categoryList[0].id;
				this.getProductList();
			});
			getProductAPI().then((result) => {
				console.log(result);
				this.product = result.data;
			});
			getProductTwoAPI().then((result) => {
				console.log(result);
				this.producttwo = result.data;
			});
			getProductThreeAPI().then((result) => {
				console.log(result);
				this.productthree = result.data;
			});
		},
		methods: {
			getProductList() {
				getProductListAPI({
					category_id: this.category_id
				}).then((result) => {
					// console.log(result);
					this.productList = result.data;
				})
			},

			// 单击左菜单中的某一项后，显示对应分类的商品列表
			onClickLeftMenus(category_id) {
				this.category_id = category_id; //更新分类id
				this.getProductList(); //获取该分类id对应的所有商品
			},
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			},
			onClickPagination() {
				this.isShow = this.currentPage;

			},
		}

	};
</script>


<style lang="less" scoped="scoped">
	.goods_item {
		display: flex;
		flex-direction: column;
		margin: 10px;
		background-color: white;
		border-radius: 10px;
		font-size: 14px;
		text-align: center;

		.price {
			margin: 0.5rem auto;
		}
	}

	.van-pagination {
		width: 50%;
		margin: 0 auto;
	}

	.van-sidebar {
		width: 120px;

		.van-sidebar-item {
			padding: 10px;
		}
	}

	.van-card {
		font-size: 14px;

		.van-card__content {
			justify-content: center;

			.van-card__price {
				color: red;
				font-weight: bold;
				text-align: right;
			}
		}
	}

	.show {
		display: block;
	}

	.hidden {
		display: none;
	}
</style>
